<script setup lang="ts">
import type { PropType } from 'vue';
import { useRouter } from 'vue-router'

import type { HotArticle } from '@/types/types'

const router = useRouter()

const props = defineProps({
    articleList: {
        type: Object as PropType<HotArticle[]>,
        required: true
    }
})

const routeTo = (id: number) => {
    router.push(`/article/${id}`)
}
</script>

<template>
    <div class="card2" v-loading="props.articleList.length == 0">
        <div class="topic">
            <div class="topic-title unselectable">
                热门文章：
                <div class="topic-titlebg"></div>
            </div>
            <div v-for="(item, rank) in props.articleList" class="ftopic-text">
                <div class="topic-rank unselectable" :class="{
                    'r1': rank === 0,
                    'r2': rank === 1,
                    'r3': rank === 2
                }">{{ rank + 1 }}</div>
                <div class="title" @click="routeTo(item.id)">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.card2 {
    width: 100%;
    /* background-color: rebeccapurple; */
    border-radius: 5px;
    border: 3px solid #f5900a;
    margin-top: 20px;
}

.topic,
.post {
    margin: 10px 20px;
}

.ftopic-text {
    display: flex;
    flex-direction: row;
    align-items: start;
    /* justify-content: space-between; */
    margin-top: 10px;
    font-size: 16px;
    gap: 8px;
}

.topic-rank {
    width: 20px;
    height: 20px;
    text-align: center;
    flex-shrink: 0;
    font-weight: 600;
}

.title {
    cursor: pointer;
    font-weight: 500;
}

.title:hover {
    color: #f5900a;
}

.topic-title {
    font-size: 18px;
    font-weight: 600;
    position: relative;
    margin: 20px 0;
}

.topic-titlebg {
    height: 20px;
    background-color: #ffbe7f;
    position: absolute;
    bottom: -10px;
    z-index: -1;
}

.topic-titlebg {
    width: 85px;
}

.r1 {
    color: #ff0000;
}

.r2 {
    color: #ffa500;
}

.r3 {
    color: #ff69b4;
}
</style>
